<template>
	<div class="kaoguanguanli">
    <top></top>
    <div class="flexcc">
      <img src="../../../static/img2/banner2.png">
    </div>
    <div class="ww" style="padding: 20px 0 50px;">

      <div style="margin-bottom: 30px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/saishijieshao">赛事介绍</a></el-breadcrumb-item>
          <el-breadcrumb-item>{{saishi.name}}查看成绩</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div style="background: #fff; width: 100%; border-radius: 10px; padding: 30px; min-height: calc(100vh - 460px);">

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="个人成绩" name="first">
              <el-table :data="tableData2" border style="width: 100%">
                  <el-table-column prop="id_name" label="姓名"></el-table-column>
                  <!-- <el-table-column prop="sex" label="性别"></el-table-column> -->
                  <el-table-column label="组别">
                    <template slot-scope="scope">
                      <div v-if="scope.row.match_type == 1">初中生组</div>
                      <div v-if="scope.row.match_type == 2">高中生组</div>
                      <div v-if="scope.row.match_type == 3">高职生组</div>
                      <div v-if="scope.row.match_type == 4">大学生组</div>
                      <div v-if="scope.row.match_type == 5">成人组</div>
                      <div v-if="scope.row.match_type == 6">小学组</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="entry_time" label="参赛时间"></el-table-column>
                  <el-table-column prop="play_time" label="比赛用时"></el-table-column>
                  <el-table-column prop="score" label="分数"></el-table-column>
                  <el-table-column prop="ranking" label="名次"></el-table-column>

              </el-table>
            </el-tab-pane>
            <el-tab-pane label="团队成绩" name="second">
              <el-table :data="tableData" border style="width: 100%" @expand-change="kai">
                  <el-table-column type="expand" >
                    <template slot-scope="scope">
                      <div class="flexc" style="padding-left: 100px;">
                        <div style="background: #eaeaea; padding: 10px; flex: 1;">姓名</div>
                        <div style="background: #eaeaea; padding: 10px; flex: 1;">参赛时间</div>
                        <div style="background: #eaeaea; padding: 10px; flex: 1;">比赛用时</div>
                        <div style="background: #eaeaea; padding: 10px; flex: 1;">分数</div>
                        <div style="background: #eaeaea; padding: 10px; flex: 1;">名次</div>
                        <!-- <div style="background: #eaeaea; padding: 10px; flex: 1;">操作</div> -->
                      </div>
                      <div class="flexc" style="padding-left: 100px;" v-for="item in scope.row.list">
                        <div style="background: #fff; padding: 10px; flex: 1;">{{item.id_name}}</div>
                        <div style="background: #fff; padding: 10px; flex: 1;">{{item.entry_time}}</div>
                        <div style="background: #fff; padding: 10px; flex: 1;">{{item.take_time}}</div>
                        <div style="background: #fff; padding: 10px; flex: 1;">{{item.score}}</div>
                        <div style="background: #fff; padding: 10px; flex: 1;">{{item.ranking}}</div>
                        <!-- <div style="background: #fff; padding: 10px; flex: 1;"><el-button type="text">生成证书</el-button></div> -->
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="team_name" label="团队名"></el-table-column>
                  <el-table-column prop="match_id" label="比赛id"></el-table-column>
                  <el-table-column prop="team_id" label="队伍id"></el-table-column>
                  <el-table-column prop="match_type" label="组别">
                    <template slot-scope="scope">
                      <div v-if="scope.row.match_type == 1">初中生组</div>
                      <div v-if="scope.row.match_type == 2">高中生组</div>
                      <div v-if="scope.row.match_type == 3">高职生组</div>
                      <div v-if="scope.row.match_type == 4">大学生组</div>
                      <div v-if="scope.row.match_type == 5">成人组</div>
                      <div v-if="scope.row.match_type == 6">小学组</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="entry_time" label="参赛时间"></el-table-column>
                  <el-table-column prop="take_time" label="比赛用时"></el-table-column>
                  <el-table-column prop="score" label="分数"></el-table-column>
                  <el-table-column prop="ranking" label="名次"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>




          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>

        </div>

      </div>
    </div>



	</div>
</template>

<script>

  import top from '../top.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      top
    },
		data() {
			return {
        activeName:'first',
        tableData:[],
        tableData2:[],

        search:{
          // name:"",
          // type:"",
          competition_id:this.$route.query.id,
          // page:1,
          // page_size:2000,
        },
        total:0,

        log:false,
        saishi:""
      }
		},
		created() {
      this.getlist3()

		},
		mounted() {

		},
		methods: {
        kai(row) {
          this.getlist2(row)
        },

        handleClick:function(){
          this.search.page = 1
          if(this.search.activeName == 'first'){
            this.getlist3()
          }else{
            this.getlist()
          }
        },

        getlist:function(){
          axios.get(this.IP_URL+'/api/enrolment/teamrankscore',{params:this.search}).then((response)=>{
          	if (response.data.msg.code == 0) {
              response.data.data.forEach(item=>{
                this.$set(item,'list',[])
              })
              this.tableData = response.data.data

          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        },

        getlist2:function(row,competition_id,team_id){
          axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:{
            competition_id:row.match_id,
            team_id:row.team_id
          }}).then((response)=>{
          	if (response.data.msg.code == 0) {
              row.list = response.data.data
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        },

        getlist3:function(row,competition_id,team_id){
          axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:this.search}).then((response)=>{
          	if (response.data.msg.code == 0) {
              this.tableData2 = response.data.data
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        },

        fanye:function(val){
          this.search.page = val
          this.getlist()
        },

    }
	}
</script>


<style scoped >
  /deep/ .el-input__inner{ width: 300px;}
</style>
